<template>
	<view>
		<view class="serveList">
			<view class="main-box">
				<scroll-view class="scroll-box z-padding-32" scroll-y="true" :show-scrollbar="false" enhanced="true">
					<view class="list z-padding-24 z-flex-c" v-for="(item, index) in list" @tap="detail(item.id)">
						<image class="cover z-flex-0 z-radius-12 z-margin-r-24" :src="cdn(item.image)" mode="aspectFill"></image>
						<view class="z-flex-1">
							<view class="z-flex-c">
								<view class="icon z-radius-4 z-flex z-font-18" v-if="item.shop_id === 0">严选</view>
								<view class="z-font-30 z-margin-lr-16">{{ item.name }}</view>
								<image src="/static/index/to-img.png" class="more"></image>
							</view>
							<view class="z-flex-c z-margin-t-32">
								<view class="unit z-margin-t-8 z-font-22">¥</view>
								<view class="price z-font-30">{{ item.price }}</view>
							</view>
						</view>
					</view>
					<!-- <van-empty description="暂无服务项目" v-if="finish && list.length === 0" /> -->
					<u-empty v-if="finish && list.length === 0" text="列表为空" mode="list"></u-empty>
				</scroll-view>
			</view>

			<view class="btn-box z-flex-0 z-padding-lr-32 z-padding-t-32" :style="'padding-bottom:' + safeBottom">
				<view class="z-btn" @tap="change">去修改</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [],
			finish: false,
			loading: false,
			page: 1,
			type: 0,
			safeBottom: `20px`
		};
	},
	onShow() {
		this.getList();
	},
	methods: {
		detail(id) {
			this.util.skip('/service/servedetail/servedetail?id=' + id);
		},
		change() {
			this.util.skip('/service/userInfo/userInfo');
		},

		getList() {
			this.http.get('goods/getusergoods', {
				page: this.page,
				type: this.type
			}).then((res) => {
				(this.list = res.data), (this.finish = true);
			});
		}
	}
};
</script>

<style>
/* service/serveList/serveList.wxss */
.serveList {
	height: 100vh;
	/* #ifdef H5 */
	height: calc(100vh - 90rpx);
	/* #endif */
	background: #edf1f4;
	display: flex;
	flex-direction: column;
}
.main-box {
	flex: 1;
	overflow: hidden;
}
.scroll-box {
	height: 100%;
	box-sizing: border-box;
}
.list {
	background: #fff;
	border-bottom: 1rpx solid rgba(164, 169, 183, 0.2);
}
.list:last-of-type {
	border-bottom: none;
}
.cover {
	width: 100rpx;
	height: 100rpx;
}

.icon {
	width: 48rpx;
	height: 26rpx;
	background-color: #1c274c;
	color: #f7c566;
}

.more {
	width: 24rpx;
	height: 24rpx;
}

.unit {
	color: #ff9600;
}
.price {
	color: #ff9600;
}

.btn-box {
	width: 750rpx;
	background: #ffffff;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	opacity: 1;
	flex-shrink: 0;
	box-sizing: border-box;
}

.btn {
	width: 686rpx;
	height: 98rpx;
	border-radius: 10rpx 10rpx 10rpx 10rpx;
	opacity: 1;
	line-height: 98rpx;
	margin: auto;
	color: #fff;
}
</style>
